<template>
  <div class="add-task-container">
    <!-- 天地图卫星底图 -->
    <tdt-map
      class="map-background"
      :center="[115.892, 28.676]"
      :zoom="13"
      :min-zoom="4"
      :max-zoom="18"
      :enable-scroll-wheel-zoom="true"
      :enable-dragging="true"
      :enable-double-click-zoom="true"
      :enable-keyboard="true"
      :control="{
        scale: false,
        zoom: true,
        mapType: false,
      }"
      @load="onMapLoad"
    >
      <!-- 影像底图 -->
      <tdt-tilelayer-tdt :url="satelliteUrl" :z-index="1"></tdt-tilelayer-tdt>
    </tdt-map>

    <!-- 阴影遮罩层 -->
    <ShadowOverlay :z-index="1" />

    <!-- 左侧面板组 -->
    <div class="left-panel-group">
      <!-- 新建任务面板 -->
      <NewTask 
        ref="newTaskRef"
        @show-search-device="handleShowSearchDevice" 
        @show-select-route="handleShowSelectRoute"
      />
      
      <!-- 搜索设备面板 -->
      <transition name="slide-left">
        <SearchDevice v-if="showSearchDevice" @hide="handleHideSearchDevice" />
      </transition>
      
      <!-- 选择航线面板 -->
      <transition name="slide-left">
        <SelectRoute 
          v-if="showSelectRoute" 
          @hide="handleHideSelectRoute" 
          @select-route="handleRouteSelected"
        />
      </transition>
    </div>
  </div>
</template>

<script setup>
import { onMounted, computed, ref, provide } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/modules/user";
import { tiandituConfig } from "@/config";

// 导入组件
import NewTask from "./components/NewTask.vue";
import SearchDevice from "./components/SearchDevice.vue";
import SelectRoute from "./components/SelectRoute.vue";
import ShadowOverlay from "@/components/ShadowOverlay.vue";

const router = useRouter();
const userStore = useUserStore();

// NewTask组件引用
const newTaskRef = ref(null);

// 控制搜索设备面板的显示状态
const showSearchDevice = ref(false);

// 显示搜索设备面板
const handleShowSearchDevice = () => {
  // 先隐藏选择航线面板
  showSelectRoute.value = false;
  // 等待动画完成后再显示搜索设备面板
  setTimeout(() => {
    showSearchDevice.value = true;
  }, 300);
};

// 隐藏搜索设备面板
const handleHideSearchDevice = () => {
  showSearchDevice.value = false;
};

// 控制选择航线面板的显示状态
const showSelectRoute = ref(false);

// 显示选择航线面板
const handleShowSelectRoute = () => {
  // 先隐藏搜索设备面板
  showSearchDevice.value = false;
  // 等待动画完成后再显示选择航线面板
  setTimeout(() => {
    showSelectRoute.value = true;
  }, 300);
};

// 隐藏选择航线面板
const handleHideSelectRoute = () => {
  showSelectRoute.value = false;
};

// 处理航线选择
const handleRouteSelected = (route) => {
  if (newTaskRef.value) {
    newTaskRef.value.handleRouteSelected(route);
  }
};

// 提供给子组件使用
provide('showSearchDevice', showSearchDevice);
provide('handleShowSearchDevice', handleShowSearchDevice);
provide('handleHideSearchDevice', handleHideSearchDevice);

// 使用随机域名平衡负载
const randomDomain = computed(() => Math.round(Math.random() * 7));

// 影像底图URL
const satelliteUrl = computed(() => {
  const url = tiandituConfig.serviceUrl.satellite.replace(
    "{s}",
    randomDomain.value
  );
  return `${url}?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tiandituConfig.apiKey}`;
});

// 地图加载完成回调
const onMapLoad = (map) => {
  console.log("天地图加载完成", map);
};


onMounted(() => {
  // 检查认证状态
  userStore.checkAuth();
});
</script>

<style lang="scss" scoped>
.add-task-container {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: rgba(1, 36, 48, 1);

  /* 左侧面板组 */
  .left-panel-group {
    position: absolute;
    left: 31px;
    top: 147px;
    z-index: 10;
		width: 1228px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    animation: slideRight 0.8s ease-out;
  }

  /* 地图背景 */
  .map-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;

    :deep(.tdt-map-container) {
      width: 100% !important;
      height: 100% !important;
    }

    :deep(.BMap_mask) {
      pointer-events: none !important;
    }

    :deep(.anchorBL) {
      display: none !important;
    }

    // 隐藏天地图控件
    :deep(.BMap_stdMpCtrl) {
      display: none !important;
    }

    :deep(.BMap_scaleCtrl) {
      display: none !important;
    }

    :deep(.BMap_cpyCtrl) {
      display: none !important;
    }
  }

  :deep(#dv-full-screen-container) {
    position: relative;
    z-index: 2;
    pointer-events: none;
    min-height: 100vh;
    height: auto !important;
  }
}

// 动画效果
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideLeft {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideRight {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

// 滑动动画
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.3s ease;
}

.slide-left-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-left-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
</style>